<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/semantic.css">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/cola.css">
	<script src="../../resources/jquery-2.1.3.js"></script>
	<script src="../../resources/cola-ui/3rd.js"></script>
	<script src="../../resources/cola-ui/semantic.js"></script>
	<script src="../../resources/cola-ui/cola.js"></script>
	<script src="../../resources/cola-ui/i18n/zh/cola.js"></script>

	<style>
		.fruit {
			display: inline-block;
			width: 80px;
			height: 40px;
			line-height: 40px;
			border: 1px solid #0e566c;
			text-align: center;
			margin: 2px;
			cursor: pointer;
		}

		.fruit.current {
			color: #fff;
			background: #0e8c8c;
		}
	</style>

	<script type="text/javascript">
		cola(function (model) {
			model.set("fruits", [
				{ name: "Apple", num: 215 },
				{ name: "Orange", num: 60 },
				{ name: "Banana", num: 43 },
				{ name: "Cherry", num: 761 }
			]);

			model.action({
				previous: function() {
					model.get("fruits").previous();
				},
				next: function() {
					model.get("fruits").next();
				},
				getCurrent: function() {
					alert(model.get("fruits#.name"));
				},
				remove: function() {
					if (model.get("fruits#")) {
						model.get("fruits#").remove();
					}
				},
				each: function() {
					var names = [];
					model.get("fruits").each(function(fruit) {
						names.push(fruit.get("name"));
					});
					alert(names.join("\n"));
				},
				setCurrent: function(fruit) {
					model.get("fruits").setCurrent(fruit);
				}
			});
		});
	</script>
</head>
<body style="padding:1em">

<p>
	<label>Fruits</label>
	<li c-repeat="fruit in fruits" class="fruit" c-bind="fruit.name" c-onclick="setCurrent(fruit)"></li>
</p>

<hr>

<p>
	<button c-onclick="previous()">Previous</button>
	<button c-onclick="next()">Next</button>
	<button c-onclick="getCurrent()">Show Current</button>
	<button c-onclick="remove()">Remove Current</button>
	<button c-onclick="each()">Each</button>
</p>

</body>
</html>